<template>
  <table-form :disabled="disabled" @next="step1Ctrl" @jump="jump">
    <template slot="title">
      <h2 class="fromDivTit">
        <div>请填写广告挂牌信息</div>
        <i
          v-if="isEdit && detailRes.step <= 3"
          class="edit-icon"
          @click="isDisabled = true"
        />
      </h2>
    </template>
    <!---->
    <div class="form-body">
      <el-form
        ref="step1Form"
        :model="step1Form"
        :rules="rules"
        label-width="100px"
        class="formDiv"
      >
        <el-form-item label="广告截图:" label-width="100px" prop="poster">
          <Upload
            :id="id"
            :maxcount="5"
            :urls="step1Form.poster || ''"
            tip="可上传图片(jpg/ png/ jpeg)"
            format="jpg,png,jpeg"
            :disabled="isEdit && !isDisabled"
            @getImage="getAdImage"
          />
        </el-form-item>
        <el-form-item label="广告链接:" prop="advertLinks">
          <el-input
            v-model="step1Form.advertLinks"
            :disabled="isEdit && !isDisabled"
            type="text"
            placeholder="请输入内容"
            style="width: 493px"
          />
        </el-form-item>
        <el-form-item label="备注:" prop="advertRemark">
          <el-input
            v-model="step1Form.advertRemark"
            :disabled="isEdit && !isDisabled"
            type="textarea"
            placeholder="请输入内容"
            style="width: 493px; height: 113px"
          />
        </el-form-item>
      </el-form>
      <div v-if="jumpReason" class="jump-box">
        <div class="jump-reson">跳过原因:</div>
        <span>{{ jumpReason }}</span>
      </div>
    </div>
    <template v-if="isEdit" slot="footer">
      <div class="dialog-footer">
        <el-button
          v-if="isDisabled"
          type="primary"
          :disabled="disabled"
          @click="saveEdit"
        >保存</el-button>
      </div>
    </template>
  </table-form>
</template>
<script>
import Upload from '@/components/Upload/SingleImage4'
import { leaseStep1, edit } from '@/api/lease'
import { getFileList } from '@/utils/common'

import TableForm from '../tableForm.vue'

export default {
  components: {
    Upload,
    TableForm
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      getFileList,
      isDisabled: false,
      disabled: false,
      rules: {
        advertLinks: [
          {
            required: true,
            message: '请输入正确的广告链接',
            trigger: 'blur',
            pattern: /^http(s)?:\/\//
          }
        ],
        poster: [{ required: true }]
      },
      step1Form: {},
      detailRes: {
        jumpList: []
      }
    }
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return ''
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 1
      })
      return hasReason ? hasReason.jumpNote : ''
    }
  },
  watch: {
    step1Form: {
      handler(newVal, oldVal) {
        var reg = /^http(s)?:\/\//
        if (!newVal.advertLinks) {
          this.disabled = true
          return
        }
        var r = newVal.advertLinks.match(reg)
        if (r != null && newVal.poster) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  async mounted() {
    if (!this.isEdit) {
      this.step1Form = {
        advertLinks: '',
        advertRemark: '',
        poster: '',
        stepName: '待挂广告牌',
        id: this.id
      }
    } else {
      await this.$store.dispatch('detail/getLeaseDatail', this.id)
      var detail = this.$store.state.detail.leaseDetail
      this.detailRes = detail || {}
      this.step1Form = Object.assign(
        {},
        {
          advertLinks: detail.advertLinks,
          advertRemark: detail.advertRemark,
          poster: detail.poster,
          stepName: '待挂广告牌',
          id: this.id
        }
      )
    }
  },
  methods: {
    getAdImage(img) {
      this.step1Form.poster = img
    },

    async saveEdit() {
      var res = await edit(this.step1Form)
      if (res.code === 200) {
        this.$message({ message: '操作成功', type: 'success' })
        this.isDisabled = false
      }
    },
    jump() {
      this.$emit('jump', this.step1Form)
    },
    async step1Ctrl() {
      var step1Res = await leaseStep1(this.step1Form)
      if (step1Res.code === 200) {
        this.$emit('next')
      }
    }
  }
}
</script>
<style lang="scss">
.edit-icon {
  cursor: pointer;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
